<template name="register">
    <view class="registerBox">
        <view>输入手机号</view>
        <input type="text" placeholder="请输入您的手机号" v-model="tel" maxlength=11 @change="passTel" />
        <view>设置密码</view>
        <input type="text" placeholder="6-10个字符组成" v-model="pwd" maxlength=10 @change="passPwd" />
        <view>验证码</view>
        <input type="text" placeholder="输入您的验证码" v-model="msg" maxlength=6 @input="passMsg" />
        <button class='commitRegister' @click="isRegister" :style="{backgroundImage:'url('+registerImgUrl+')'}" v-if="this.data.flag">注册</button>
        <button class='commitRegister' @click="isChange" :style="{backgroundImage:'url('+registerImgUrl+')'}" v-else="this.data.flag">确认修改</button>
        <button class="identifyingCode" ref="yzm" :style="{backgroundImage:'url('+yzmImgUrl+')'}" @click="getyzm">获取验证码</button>
    </view>

</template>

<script>
    export default {
        props: {
            data: {
                type: Object,
            }

        },
        data() {
            return {

                tel: this.data.tel,
                pwd: this.data.pwd,
                msg: this.data.msg,
                //注册按钮图片
                registerImgUrl: '/static/login/sign_gray.png',
                //验证码图片
                yzmImgUrl: '/static/login/yzm_gray.png'

            };
        },
        methods: {

            //验证手机号
            passTel() {
                let reg = /^\d{11}$/;
                let passTel = reg.test(this.tel);
                return passTel
            },
            //验证密码
            passPwd() {
                let reg = /^[\w\.]{6,10}$/;
                let passPwd = reg.test(this.pwd);
                return passPwd
            },
            //验证验证码
            passMsg() {
                let reg = /^\d{6}$/;
                let passMsg = reg.test(this.msg);
                if (passMsg) {
                    this.yzmImgUrl = '/static/login/yzm_red.png'
                } else {
                    this.yzmImgUrl = '/static/login/yzm_gray.png'
                }
                return passMsg
            },
            //表单验证
            isRegister() {
                const tel = this.passTel();
                const pwd = this.passPwd();
                const msg = this.passMsg();
                let Arr = [{
                    isTrue: tel,
                    errMsg: "电话号码格式错误"
                }, {
                    isTrue: pwd,
                    errMsg: "密码格式错误"
                }, {
                    isTrue: msg,
                    errMsg: "验证码格式错误"
                }]
                for (let k = 0; k < Arr.length; k++) {
                    if (!Arr[k].isTrue) {
                        // alert(Arr[k].errMsg)
                        uni.showToast({
                            title: Arr[k].errMsg,
                            position: "center",
                            icon: "none",
                            duration: 2000,
                            mask: true
                        });
                        break;
                    }
                }
                if (tel && pwd && msg) {
                    // 发送请求
                    this.$request('/comic-time/useradd', {
                        "userPhone": this.tel,
                        "userPassword": this.pwd,
                        "code": this.msg
                    }, 'POST').then(res => {
                        console.log(res);
                        if(res.msg==="请求成功"){
                            uni.showToast({
                                title: "账号注册成功",
                                position: "center",
                                icon: "none",
                                duration: 2000,
                                mask: true
                            });  
                        }
                    });
                }
            },
            getyzm() {
                if (this.passTel()) {
                    this.$request('/comic-time/send', {
                        userPhone: this.tel
                    }, 'GET').then(res => {
                        console.log(res);
                    });
                } else {
                    uni.showToast({
                        title: "请输入正确手机号",
                        position: "center",
                        icon: "none",
                        duration: 2000,
                        mask: true
                    });
                }
            },
            isChange() {
                this.$request('/comic-time/updatePassword', {
                    "code": this.msg,
                    "userPassword": this.pwd,
                    "userPhone": this.tel
                }, 'PUT').then(res => {
                    console.log(res)
                    if(res.msg==="请求成功"){
                        uni.showToast({
                            title: "密码设置成功",
                            position: "center",
                            icon: "none",
                            duration: 2000,
                            mask: true
                        });  
                    }
                })


            }

        },
        beforeUpdate() {
            if (this.passTel() && this.passPwd() && this.passMsg()) {
                this.registerImgUrl = '/static/login/sign_red.png'
            } else {
                this.registerImgUrl = '/static/login/sign_gray.png'
            }
        }
    }
</script>
<style lang="scss" scoped>
    .registerBox {
        width: 592rpx;
        height: 654rpx;
        background: #fff;
        position: relative;
        margin-left: 40rpx;

        view {
            width: 100%;
            height: 34rpx;
            font-family: PingFangSC-Regular;
            font-size: 36rpx;
            line-height: 33rpx;
            color: #333333;
            margin-bottom: 29rpx;
        }

        input {
            border: none;
            font-size: 30rpx;
            border-bottom: solid 2rpx #dddddd;
            margin-bottom: 50rpx;
        }

        .commitRegister {
            width: 590rpx;
            height: 104rpx;
            border-radius: 52rpx;
            border: solid 2rpx #dddddd;
            margin-top: 70rpx;
            margin-bottom: 60rpx;
            background-size: cover;
            font-family: PingFangSC-Medium;
            font-size: 40rpx;
            line-height: 104rpx;
            color: #ffffff;
        }

        .identifyingCode {
            width: 191rpx;
            height: 61rpx;
            background-size: cover;
            border-radius: 30rpx;
            font-family: PingFangSC-Medium;
            font-size: 26rpx;
            line-height: 61rpx;
            color: #ffffff;
            position: absolute;
            top: 342rpx;
            left: 401rpx;
        }
    }
</style>
